<template>
	<view class="circle_Box">
		<!-- <view class="videos" v-for="(item,index) in leslists">
			<image class="videoimg" mode="widthFix" v-if="item.coverUrl != null" :src="item.coverUrl"
				@click="newvideo(item)"></image>
			<image class="videoimg" mode="widthFix" v-else :src="item.stringList[0]" @click="newvideo(item)"></image>


			<view class="videotext" @click="newvideo(item)">{{item.title}}</view>


			<view class="videopeople">
				<view class="heads">
					<image :src='item.imageUrl' mode="" class="headsimg"></image>
				</view>
				<view class="names">{{item.nickName}}</view>
				<u-icon class="ic" v-if="item.hitState == 0" name="thumb-up" size="24" @click="zan(item)"></u-icon>
				<u-icon class="ic" v-if="item.hitState == 1" name="thumb-up-fill" size="24" color="#FFB22F"
					@click="zan(item)"></u-icon>
				<view class="nums" v-if="item.circlePraseCount < 10000">{{item.circlePraseCount}}</view>
				<view class="nums" v-if="item.circlePraseCount >= 10000">
					{{Number(item.circlePraseCount/10000).toFixed(0)}}w+</view>
			</view>
		</view> -->
		<waterfallsFlow ref="waterfallsFlow" @image-load="loadertend" @imageClick="newvideo" :list="leslists">
			<template v-slot:default="{item , index}">
				<view>
					<!-- <image class="videoimg" mode="widthFix" v-if="item.coverUrl != null" :src="item.coverUrl"
						@click="newvideo(item)"></image>
					<image class="videoimg" mode="widthFix" v-else :src="item.stringList[0]" @click="newvideo(item)">
					</image> -->
					<view class="videotext" @click="newvideo(item)">{{item.title}}</view>
					<view class="videopeople">
						<view class="heads">
							<image :src='item.imageUrl' mode="" class="headsimg"></image>
						</view>
						<view class="names">{{item.nickName}}</view>
						<u-icon class="ic" v-if="item.hitState == 0" name="thumb-up" size="24" @click="zan(item)">
						</u-icon>
						<u-icon class="ic" v-if="item.hitState == 1" name="thumb-up-fill" size="24" color="#FFB22F"
							@click="zan(item , index)"></u-icon>
						<view class="nums" v-if="item.circlePraseCount < 10000">{{item.circlePraseCount}}</view>
						<view class="nums" v-if="item.circlePraseCount >= 10000">
							{{Number(item.circlePraseCount/10000).toFixed(0)}}w+
						</view>
					</view>
				</view>
			</template>
		</waterfallsFlow>
		<u-loadmore @loadmore="addmodle" :status="status" />
	</view>
</template>

<script>
	import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
	let timer = null
	import {
		circlelist,
		zan,
		nzan,
	} from '@/api/community'
	export default {
		components: {
			waterfallsFlow
		},
		props: {
			searchs: {}
		},
		data() {
			return {
				leslistsShow: true,
				status: "loadmore",
				leslists: [],
				leslistsTow: [],
				loding: false,
				List: [],
				over: false,
				circles: {
					pageSize: 10,
					pageNum: 1,
					type: 0,
					title: null,
				},
			}
		},
		created() {

		},
		mounted() {
			this.circles.title = this.searchs;
			this.addmodle();
		},
		onReachBottom() {
			// //阻止重复加载
			// if (timer !== null) {
			// 	clearTimeout(timer)
			// }
			// this.lessons.pageNum++;
			// timer = setTimeout(() => this.circlelist(), 500)
			// this.getMoreNews()
		},
		methods: {
			loadertend() {
				this.$nextTick(function() {
					uni.hideLoading();
				})
			},
			overload() {
				// this.circles.title = '';
				if (!this.leslists.length) {
					return
				}
				if (this.status == "loading") {
					return
				}
				let zanshi = this.status
				this.status = "loading";
				let this_ = this
				circlelist({
						pageSize: this.leslists.length,
						pageNum: 1,
						type: 0,
						title: this.circles.title,
					}).then(res => {
						res.data.records.forEach(item => {
							if (item.coverUrl) {
								item.ImgUrl = item.coverUrl
							} else {
								item.ImgUrl = item.stringList[0]
							}
							// this.leslists.push(item)
						})
						this.leslists = res.data.records
						// setTimeout(() => {
						let this_ = this
						this.$nextTick(function() {
							this_.$refs.waterfallsFlow.overload()
						})
						// }, 0)
						// if (res.data.total > this.leslists.length) {
						// 	this.over = false;
						// }
					})
					.finally(() => {
						this.status = zanshi;
					});
			},
			addmodle() {
				console.log(this.circles.title)
				if (this.over == true) {
					return;
				}
				if (this.status == "loadmore") {
					this.circlelist();
				}
			},
			chk(num) {
				alert((num % 2 == 0) ? "偶数" : "奇数"); //判断是否能整除2
			},
			newlist() {
				this.leslists = [];
				this.leslistsTow = [];
				this.circlelist()
			},
			circlelist() {
				this.status = "loading";
				uni.showLoading({
					mask: true
				});
				circlelist(this.circles).then(res => {
						// console.log(res.data.records.length)
						if (res.data.records.length == 0) {
							this.$nextTick(function() {
								uni.hideLoading();
							})
						}
						if (res.data.records.length < 10) {
							this.over = true;
							setTimeout(() => {
								this.status = "nomore";
							}, 0);
						} else {
							this.circles.pageNum++;
						}
						if (res.data.records.length != 0) {
							res.data.records.forEach((item, index) => {
								if (item.coverUrl) {
									item.ImgUrl = item.coverUrl
								} else {
									item.ImgUrl = item.stringList[0]
								}
								this.leslists.push(item)
							})
						}

						// } else {
						// 	// this.circles.pageNum--;
						// 	uni.showToast({
						// 		title: '无更多视频',
						// 		icon: 'none',
						// 		duration: 2000
						// 	});
						// }
					})
					.finally(() => {

						this.status = "loadmore";
					});
			},
			newvideo(item) {
				// console.log(12323)
				// uni.navigateTo({
				// 	url: '/pages/community/content',
				// });
				if (item.typeVideo == 1) {
					uni.navigateTo({
						url: '/pages/community/content?id=' + item.id,
					});
				} else if (item.typeVideo == 0) {
					uni.navigateTo({
						url: '/pages/community/video/video?id=' + item.id,
					});
				}

			},
			zan(item, index) {
				// console.log(index)
				// state 0:未点赞 1:已点赞  circlePraseCount数量
				if (item.hitState == 0) {
					let ss1 = {
						circleId: item.id
					}
					zan(ss1).then(res => {
						if (res.success == 1) {
							// item.circleHitLikeId= res.data.id;
							uni.showToast({
								title: '点赞成功',
								icon: 'success',
								duration: 2000
							});
							item.hitState = 1;
							item.circlePraseCount++;
							this.$forceUpdate()
						} else {
							uni.showToast({
								title: res.data,
								icon: 'none',
								duration: 2000
							});
						}

					})
				} else if (item.hitState == 1) {
					if (item.circlePraseCount >= 0) {


						let ss2 = {
							circleId: item.id,
						}
						nzan(ss2).then(res => {
							if (res.success == 1) {
								// item.circleHitLikeId=  '';
								uni.showToast({
									title: '取消成功',
									icon: 'success',
									duration: 2000
								});
								item.hitState = 0;
								item.circlePraseCount--;
							} else {
								uni.showToast({
									title: res.data,
									icon: 'none',
									duration: 2000
								});
							}

						})
					}
				}
			},

		}
	}
</script>

<style>

</style>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	page {
		// background-color: rgb(229, 231, 233);
		// height: 120vh;
	}

	.circle_Box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: flex-start;
		width: 100%;
		padding: 20upx;
		padding-bottom: 0;
		overflow: hidden;
	}

	.videos {
		background-color: #FFFFFF;
		border-radius: 40rpx;
		overflow: hidden;
		margin-bottom: 20upx;
		width: calc((100% - 10px) / 2);
		display: inline-block;
	}



	.Waterfalls {
		// width: calc((100% - 10px) / 2);
		width: 100%;
		// display: flex;
		// justify-content: space-between;
		// flex-wrap: wrap;
		// align-items: flex-start;
	}

	.videoimg {
		position: relative;
		// height: 440rpx;
		width: 100%;
		// background-color: #1467FF;
	}

	.videotext {
		position: relative;
		// height: 81rpx;
		width: 90%;
		margin: 0 auto;
		// overflow: hidden;
		// /*超出部分隐藏*/
		// white-space: nowrap;
		// /*不换行*/
		// text-overflow: ellipsis;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 32rpx;
		// line-height: 60rpx;
		font-size: 28upx;
	}

	.videopeople {
		position: relative;
		display: flex;
		height: 90upx;
		width: 100%;
	}

	.heads {
		text-align: center;
		width: 23%;
		line-height: 90upx;

		// background-color: #1467FF;
	}

	.headsimg {
		top: 15upx;
		width: 60upx;
		height: 60upx;
		border-radius: 999rem;
	}

	.names {
		width: 40%;
		// background-color: #5AC725;
		font-size: 20upx;
		line-height: 90upx;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*不换行*/
		text-overflow: ellipsis;
	}

	.ic {
		width: 12%;
		margin-right: 0;
		right: 0;
		// background-color: #1467FF;
	}

	.nums {
		width: 25%;
		font-size: 24upx;
		line-height: 90upx;
		text-align: center;
		// background-color: #BEF5C8;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*不换行*/
		text-overflow: ellipsis;
	}
</style>
